<template>
    <view class="body">
        <view class="u-scroll">
            <view class="text9">可使用活动余额</view>
            <view class="item1" v-for="item in dataList"  :key="item.id">
                <view class="item-top">
                    <image src="../../static/img/down1.png" alt="">
                    <view class="text1">{{item.name}}</view>
                    <view class="text2">￥</view>
                    <view class="text3">{{item.price}}</view>
                </view>
                <view class="item-center">
                    <view class="text4">{{item.create_time}}</view>
                </view> 
                <view class="text5">{{item.note}}</view>
            </view>
            <template v-if="dataList1.length > 0">
                <view class="text9">不可使用活动余额</view>
                <view class="item1 item1-a"  v-for="item in dataList1" :key="item.id">
                    <view class="item-top">
                        <image src="../../static/img/down1.png" alt="">
                        <view class="text1">{{item.name}}</view>
                        <view class="text2">￥</view>
                        <view class="text3">{{item.price}}</view>
                    </view>
                    <view class="item-center">
                        <view class="text4">{{item.create_time}}</view>
                    </view>
                    <view class="text5">{{item.stateName}}</view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
	export default{
		data(){
			return{
				dataListCopy:[],
				dataList:[],
				dataList1:[],
				primaryId:'',
				secondaryId:'',
				total:0,
				dataForm:{}
			}
		},
		created(){
			this.infoData()
		},
		onLoad(options) {
			if(options.params){
				this.dataForm = JSON.parse(decodeURIComponent(options.params)) || {}
			}
		},
		methods:{
			infoData(){
				this.$api.salePrice({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
					res.data.forEach(item=>{
						if(item.state === 0){
							item.checked = false
							item.disabled = false
							this.dataList.push(item)
							this.dataListCopy.push(item)
						}else{
							item.checked = false
							item.disabled = false
							this.dataList1.push(item)
							this.dataListCopy1.push(item)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
    width:100%;
    // height:100vh;
    .title{
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 46px;
        background-color: rgb(255, 255, 255);
    }
    .u-scroll{
        background:#f7f8fa;
        padding:0 14px;
        height: calc(100% - 116px);
        padding-bottom:70px;
        .text9{
            font-size: 17px;
            font-weight: 700;
            color: #06121e;
            align-self: center;
            width: 340px;
            padding: 16px 0 14px;
        }
        .item1-a{
            opacity: .5;
        }
        .item1{
            padding: 18px 16px;
            border-radius: 16px;
            background-color: #fff;
            margin-bottom: 14px;
            position: relative;
            .item-top{
                flex-direction: row;
                align-items: center;
                margin-right: 45px;
				display: flex;
                image{
                    width:16px;
                    height:24px;
                }
                .text1{
                    font-size: 17px;
                    font-weight: 700;
                    color: #06121e;
                    flex: 1;
                    margin-left: 9px;
                }
                .text2{
                    font-size: 24px;
                    font-weight: 500;
                    color: #ff5656;
                }
                .text3{
                    font-size: 34px;
                    font-weight: 500;
                    color: #ff5656;
                }
            }
            .item-center{
                flex-direction: row;
                justify-content: space-between;
                border-bottom: 1px solid #eee;
                padding-bottom: 13px;
                display: flex;
                .text4{
                    font-size: 14px;
                    color: #3d444d;
                    margin-top: 5px;
                }
            }
            .text5{
                font-size: 12px;
                color: #3d444d;
                margin-top: 10px;
            }
            .choose{
                width: 16px;
                height: 16px;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 20px;
                right: 20px;
                ::v-deep .van-checkbox__icon {
                    .van-icon{
                        font-size: 12px;
                        width: 16px;
                        height: 16px;
                        line-height: 15px;
                    }
                }
            }
        }
    }
    .bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 70px;
        background-color: #fff;
        flex-direction: row;
        align-items: center;
        display: flex;
        width:100%;
        .text11{
            font-size: 12px;
            color: #3d444d;
            margin-bottom: 10px;
            padding-left:20px;
        }
        .text12{
            font-size: 12px;
            color: #ff5656;
            margin-bottom: 10px;
        }
        .text13{
            font-size: 28px;
            font-weight: 500;
            color: #ff5656;
            line-height: 26px;
            margin-bottom: 10px;
            flex: 1;
        }
        .btn1{
            width: 135px;
            height: 50px;
            border-radius: 25px;
            border: 0;
            line-height: 50px;
            margin-right:40px;
            background: #3476fe;
            color: #fff;
            text-align: center;
        }
    }
}
</style>